<template>
<div :class="[$style.container]">

  <file-remind :data="data"></file-remind>

  <file-trends :data="data" class="mt-3"></file-trends>

  <div>
    <div :class="[$style.header]">
      <span :class="[$style.title]">文件属性</span>
    </div>
    <div>
      <ul :class="[$style.list]" v-if="data">
        <li :class="[$style.item]">
          <span :class="[$style.label]">创建人</span>
          <span :class="[$style.text]">{{data.creationByName}}</span>
        </li>
        <li :class="[$style.item]">
          <span :class="[$style.label]">创建时间</span>
          <span :class="[$style.text]">{{data.creationTime}}</span>
        </li>
        <li :class="[$style.item]">
          <span :class="[$style.label]">更新人</span>
          <span :class="[$style.text]">{{data.modifiedByName}}</span>
        </li>
        <li :class="[$style.item]">
          <span :class="[$style.label]">更新时间</span>
          <span :class="[$style.text]">{{data.modifiedTime}}</span>
        </li>
        <li :class="[$style.item]">
          <span :class="[$style.label]">路径 </span>
          <span :class="[$style.text]">{{data.path}}</span>
        </li>
        <li :class="[$style.item]">
          <span :class="[$style.label]">备注 </span>
          <span :class="[$style.text]">
            <span>{{data.remark}}</span>
            <el-link class="ml-2" :underline="false" @click="onRemark"><i class="el-icon-edit-outline"></i></el-link>
          </span>
        </li>
      </ul>
      <empty-data v-else>暂无详细信息</empty-data>
    </div>
  </div>
  <doc-remark-modal ref="docRemarkModal"></doc-remark-modal>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import FileTrends from './file-trends/index.vue'
import DocRemarkModal from '@/views/pages/docs/components/doc-remark-modal/index.vue'
import FileRemind from './file-remind/index.vue'

@Component({
  components: { FileTrends, DocRemarkModal, FileRemind }
})
export default class FileDetail extends Vue {
  @Ref() docRemarkModal!: DocRemarkModal

  @Prop() data!: any

  onRemark () {
    this.docRemarkModal.open(this.data).then((remark) => {
      this.$message.success('编辑备注成功')
      Object.assign(this.data, { remark })
    }).catch(() => {
      // ignore
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  overflow: auto;
  height: calc(100vh - 48px - 40px - 64px);
}

.title {
  color: $text-heading-color;
  font-weight: 600;
}

.header {
  padding: 4px 12px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 8px 0;
  padding: 4px 20px;
  display: flex;
}

.label {
  width: 100px;
  flex: 0 0 auto;
  color: $text-secondary-color;
}

.text {
  flex:  1 1 auto;
  word-break: break-all;
}
</style>
